import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '@/constants/index'
// vueuse 是一个方法库 需要用npm安装
import { useWindowSize } from '@vueuse/core'

//获取到屏幕的宽度 是ref类型 用.value 获取
const { width } = useWindowSize()

/**判断当前设备是否为移动设备,判断的依据是当前的屏幕宽度是否小于一个指定宽度 1280 */
export const isMobileTerminal = computed(() => {
    console.log(width.value < PC_DEVICE_WIDTH)
    return width.value < PC_DEVICE_WIDTH
})

/**
 * 动态指定rem基准值， 最大为40px  这个基准值是根标签 html 的 font-size
 * 根据用户的屏幕宽度，进行计算，把计算出来的值赋值给 html 根标签作为 fontsize 大小
 */

export const useREM = () => {
    //定义最大的fontSize
    const Max_FONT_SIZE = 40

    //监听html 文档被解析完成的事件
    document.addEventListener('DOMContentLoaded', () => {
        //拿到 html 标签
        const html = document.querySelector('html')

        //计算font-szie的大小
        let fontSize = window.innerWidth / 10
        fontSize = fontSize > Max_FONT_SIZE ? Max_FONT_SIZE : fontSize

        //赋值给 html
        html.style.fontSize = fontSize + 'px'
    })
}
